入门教程:5分钟上手 XCharts 3.0 |
您所在的位置:网站首页 › unity 入门教程 › 入门教程:5分钟上手 XCharts 3.0 |
教程:5分钟上手 XCharts 3.0获取和导入 XCharts XCharts可通过以下任意一种方式导入到项目: 直接将XCharts源码到项目 下载好XCharts源码后,直接将XCharts目录拷贝到Unity项目工程的Assets目录下。 通过Assets/Import Package导入XCharts 下载好XCharts的.unitypackage文件后,打开Unity,菜单栏 Assets-->Import Package-->选中.unitypackage导入即可开始使用XCharts。 通过Package Manager导入XCharts 对于Unity 2018.3以上版本,可通过 Package Manager来导入XCharts,打开Package Manager后,通过 Add package form git URL...,输入XCharts3.0的GitHub URL: https://github.com/XCharts-Team/XCharts.git#3.0 稍等片刻后即可使用XCharts。 也可以直接将package加入到manifest.json文件:打开Packages目录下的manifest.json文件,在dependencies下加入: "com.monitor1394.xcharts": "https://github.com/XCharts-Team/XCharts.git#3.0",如需更新XCharts,删除manifest.json文件(部分Unity版本可能是packages-lock.json文件)的lock下的com.monitor1394.xcharts相关内容即会重新下载编译。 添加一个简单图表在Hierarchy视图下右键或菜单栏GameObject下拉选择XCharts->LineChart,即可快速创建一个默认的折线图出来: 添加多个Seire在Inspector视图,找到LineChart的面板,通过Add Serie按钮,可以添加第二条Line折线: 添加其他组件 默认图表没有Legend,需要Legend组件可通过Add Component按钮添加: 添加Serie组件Serie只自带了几个常见的组件,其他组件按需额外添加。比如,需要给折线图区域填充颜色,可单独给Serie添加AreaStyle组件: 添加SerieData组件 如果需要个性化定制每个数据项的配置,可以单独给每个SerieData添加Component。比如我们给折线图的第二个数据单独显示Label: 更多组件和配置参数 XCharts经过不断的迭代优化,目前已有多达几十种的主组件和子组件,每个组件有几个至几十个不等的可配置参数,以支持各种灵活而复杂的功能。 首次使用XCharts,可在 Inspector 视图添加各种图表,给图表添加或调整里面组件,Game 视图会实时反馈调整后的效果,以熟悉各种组件的使用。各个组件的详细参数说明可查阅XCharts配置项手册。 如何快速调整参数XCharts是配置和数据来驱动的。想要什么效果,只需要去调整对应组件下的配置参数就可以,不需要去改Hierarchy视图下的节点,因为那些节点是由XCharts内部根据配置和数据生成的,即使改了也会在刷新时还原回来。 如何快速定位你想要改的效果所对应的组件,这就需要对组件有一定的了解。比如我们想要让X轴的轴线末端显示箭头,如何定位?第一步,X轴定位到XAxis0;第二步,轴线定位到AxisLine;最后,再去看AxisLine组件下有没有这样的参数可以实现这个效果,对于不太确定的参数可以查阅XCharts配置项手册。 XCharts提供从全局Theme、系列Serie、单个数据项SerieData三方面全方位的参数配置。优先级从大到小为:SerieData->Serie->Theme。以ItemStyle的颜色为例: 如果SerieData的ItemStyle配置有非0000颜色值,则优先用这个颜色值。如果Serie的ItemStyle配置有非0000颜色值,则优先用这个颜色值。否则颜色值取自主题Theme的Color Palette。通常颜色值为0000时表示用主题默认颜色,配置为0或null时表示用主题默认配置。 用代码添加折线图给gameObject挂上LineChart脚本: var chart = gameObject.GetComponent();if (chart == null){ chart = gameObject.AddComponent(); chart.Init();}调整大小: chart.SetSize(580, 300);//代码动态设置尺寸,或直接操作chart.rectTransform,或直接在Inspector上改设置标题: var title = chart.EnsureChartComponent();title.text = "Simple Line";设置提示框和图例是否显示: var tooltip = chart.EnsureChartComponent();tooltip.show = true;var legend = chart.EnsureChartComponent();legend.show = false;设置坐标轴: var xAxis = chart.EnsureChartComponent();xAxis.splitNumber = 10;xAxis.boundaryGap = true;xAxis.type = Axis.AxisType.Category;var yAxis = chart.EnsureChartComponent();yAxis.type = Axis.AxisType.Value;清空默认数据,添加Line类型的Serie用于接收数据: chart.RemoveData();chart.AddSerie("line");添加10个数据: for (int i = 0; i < 10; i++){ chart.AddXAxisData("x" + i); chart.AddData(0, Random.Range(10, 20));}这样一个简单的折线图就出来了: 如果一个Chart里面有多个系列时,则Axis的data只需要加一次,不要多个循环加重复了。记住:Axis的数据个数要和Serie的数据个数一致。 完整代码请查阅Examples:Example13_LineSimple.cs 你还可以用代码控制更多的参数,Examples下还有更多的其他例子,凡是Inspector上看到的可配置的参数,都可以通过代码来设置。XCharts配置项手册里面的所有参数都是可以通过代码控制的。 另外,除非定制,建议调用Chart下提供的public接口,特别是数据相关操作部分。这些接口内部会做一些关联处理,比如刷新图表等。常见的接口有: chart.ClearData():清空图表数据(不移除Series)chart.RemoveData():清除图表数据(会移除所有Serie)chart.AddSerie():添加Seriechart.AddXAxisData():添加X轴数据chart.AddData():添加Serie数据chart.UpdateData():更新Serie数据chart.UpdateXAxisData():更新X轴数据chart.UpdateDataName():更新Serie数据的名字XCharts内部有自动刷新机制,但也是在一定条件才会触发。如果自己调用了内部组件的接口,碰到组件没有刷新,确实找不到原因的话,可以用以下两个接口强制刷新: chart.RefreshAllComponent():刷新图表组件,会重新初始化所有组件,不建议频繁待用。chart.RefreshChart():刷新图表绘制,只刷新绘制部分,不会刷新组件文本,位置等部分。各个组件也可以通过SetAllDirty()只刷新自己。使用TextMeshProXCharts支持TextMeshPro,但默认是不开启的,需要自己手动切换。可通过以下方式开启和关闭: 开启后需要设置好TextMeshPro要用的全局字体,也可以在主题Theme里单独设置: 建议在项目初就规划好是否使用TextMeshPro,并设置好字体。在已有很多图表的情况下切换TMP时,可能某些图表无法自动刷新,可以手动点击Rebuild Chart Object按钮来重建图表,即可正常初始化。 开启了TMP项目在更新XCharts时,可能会碰到丢失了TMP引用而无法编译通过的问题,可通过以下两种方式解决: 找到XCharts.Runtime.asmdef和XCharts.Editor.asmdef,手动加上 TextMeshPro的引用移除PlayerSetting中Scripting Define Symbols的dUI_TextMeshPro宏用代码改图表参数Inspector上看到的所有参数都可以用代码来修改,关键是要定位好你要改的参数是在组件上、还是Serie上、还是在具体的数据项SerieData上。 改主组件上的参数需要先获取组件,再修改里面的参数: var title = chart.EnsureChartComponent();title.text = "Simple LineChart";title.subText = "normal line";var xAxis = chart.EnsureChartComponent();xAxis.splitNumber = 10;xAxis.boundaryGap = true;xAxis.type = Axis.AxisType.Category;改Serie的参数对于新添加的Serie: var serie = chart.AddSerie();serie.center[0] = 0.5f;serie.center[1] = 0.5f;serie.radius[0] = 80;serie.radius[1] = 90;serie.animation.dataChangeEnable = true;serie.roundCap = true;对于已存在的Serie: var serie = chart.GetSerie();serie.center[0] = 0.5f;serie.center[1] = 0.5f;serie.radius[0] = 80;serie.radius[1] = 90;serie.animation.dataChangeEnable = true;serie.roundCap = true;给Serie添加额外组件: serie.EnsureComponent();var label = serie1.EnsureComponent();label.offset = new Vector3(0,20,0);改数据项SerieData上的参数var serieData = chart.AddData(0, 20);//var serieData = serie.GetSerieData(0); //从已有数据中获取serieData.radius = 10;var itemStyle = serieData.EnsureComponent(); //给数据项添加ItemStyle组件itemStyle.color = Color.blue; |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |